<template>
  <view class="index-page">
    <view class="bg">
      <u-navbar :is-back="false" title-color="#fff" :border-bottom="false">
        <view class="search-wrap">
          <u-search placeholder="输入关键字搜索" :show-action="false"></u-search>
        </view>
        <!-- <view slot="right" class="slot-wrap">
          <view class="icon-wrap">
            <u-icon name="chat" size="40"></u-icon>
          </view>
        </view> -->
      </u-navbar>
    </view>
    <mescroll-body top="0" class="me-scroll" ref="mescrollRef" @init="mescrollInit"
      @down="downCallback" @up="upCallback" :down="downOption" :up="upOption">
      <view class="swiper-wrap u-p-t-20 u-p-b-20">
        <u-swiper :list="swiperList.items" name="img" :effect3d="true"></u-swiper>
      </view>
      <view class="grid-wrap">
        <u-grid :col="5" :border="false">
          <u-grid-item v-for="item in gridList" :key="item.id">
            <u-image width="80" height="80" :src="item.img"></u-image>
            <view class="grid-text">{{item.name}}</view>
          </u-grid-item>
        </u-grid>
      </view>
      <view class="adv-wrap">
        <u-image border-radius="20" width="100%" mode="widthFix" :src="activity.entranceImg">
          <u-loading slot="loading"></u-loading>
        </u-image>
      </view>
      <u-cell-item :border-bottom="false" icon="gift-fill" :icon-style="{color: '#fa5435'}" title="热门推荐"></u-cell-item>
      <home-waterfall :list="dataList"></home-waterfall>
    </mescroll-body>
  </view>
</template>

<script>
  import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js'
  import HomeWaterfall from '@/components/home/home-waterfall.vue'
	import home from '@/model/home.js'
	import spu from '@/model/spu.js'
  export default {
    mixins: [MescrollMixin],
    components: {
      HomeWaterfall
    },
    data() {
      return {
				spuParams: {
					start: 1,
					count: 10
				},
        mescroll: null,
        downOption: {},
        upOption: {
					page: {
						num: 0,
						size: 2
					},
        	noMoreSize: 3, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
        	textNoMore: '- 我是有底线的 -',
        	empty: {
        		tip: '～ 空空如也 ～'
        	}
        },
        dataList: [],
        swiperList: [],
        gridList: [],
        activity: {},
      }
    },
		mounted() {
			this.initData()
		},
    methods: {
			initData() {
				this.getSwiperList()
				this.getGridList()
				this.getActivity()
			},
			async getActivity() {
				this.activity = await home.getHomeActivity('a-1')
			},
			async getGridList() {
				this.gridList = await home.getGridList()
			},
			async getSwiperList() {
				this.swiperList = await home.getBannerByName('home_swiper')
			},
      // 下拉刷新
      downCallback() {
      	this.mescroll.resetUpScroll()
      },
      
      // 上拉加载更多
      async upCallback(page) {
      	this.spuParams.start = page.num
      	this.spuParams.count = page.size
      	const res = await spu.getSpuLatest(this.spuParams)
				if (page.num === 1) this.dataList = []
      	this.dataList = this.dataList.concat(res.items)
      	this.mescroll.endByPage(this.dataList.length, Math.ceil(res.total / this.spuParams.count))
				if (page.num === 1 && this.dataList.length === 0) {
					this.mescroll.hideUpScroll()
					this.mescroll.showEmpty()
				}
      },
    }
  }
</script>

<style lang="scss" scoped>
  /deep/ .u-grid-item-box {
    padding: 10rpx !important;
  }

  .index-page {
    background: #FFFFFF;

    .bg {}

    .slot-wrap {
      padding-right: 40rpx;
    }

    .search-wrap {
      width: 100%;
      padding: 0 40rpx;
    }

    .grid-wrap {
      padding: 10rpx 0;
      background: #FFFFFF;

      .grid-text {
        margin-top: 10rpx;
        font-size: 24rpx;
        color: #333333;
      }
    }

    .swiper-wrap {
      background: #FFFFFF;
    }

    .adv-wrap {
      width: 100%;
      padding: 0 20rpx;
      background: #FFFFFF;

      .adv-img {
        width: 100%;
        height: 100rpx;
      }
    }
  }
</style>
